<template>
  <div class="sll">
    <!-- 修改组件 skipSign:true //跳过检验-->
    <el-tooltip class="item" effect="dark" content="修改" placement="bottom-start">
      <el-button style="color:#0B9AC3;border:none;" icon="el-icon-edit" circle @click="modificationiClick"></el-button>
      <!-- @click="DialogVisibleMods = true" -->
    </el-tooltip>
    <div class="diaologs">
      <el-dialog title="编辑" :visible.sync="DialogVisibleMods" width="760px" :before-close="handleCloses" :show-close="false" :modal-append-to-body="false" style="text-align: left;" modal>
        <!-- :key="keyNumb" -->
        <div class="list" v-for="(item,index) in attributeOrderClone" :key="index" v-if="item.modificationSign">
          <span class="fon">
            <span v-if="!item['skipSign']&&item['Exp']!=''" style="color:red;">*</span>
            {{item.CN}}:
          </span>
          <span class="inb" v-if="item.type==='input'">
            <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="fromModData[item.EN]" v-if="item.EN==='notes' || item.EN==='memo'"></el-input>
            <el-input :disabled="item.examineDisabled" v-model="fromModData[item.EN]" placeholder="请输入内容" @blur="BurExp($event,item,index)" clearable size="mini" v-else></el-input>
          </span>
          <!-- <span v-if="!item.result" class="font_color">{{item.err}}</span> -->
          <el-tooltip v-if="!item.result" class="item" effect="dark" :content="item.err" placement="top">
            <el-button icon="el-icon-warning" circle></el-button>
          </el-tooltip>
          <span class="inb" v-if="item.type=='date'">
            <!-- <h1>{{modData.createTime}}</h1> -->
            <el-date-picker :disabled="item.examineDisabled" v-model="fromModData[item.EN]" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" @change="getSTime" style="width:90%" size="mini"></el-date-picker>
          </span>
          <!-- select--------------------------------------- -->
          <!-- {{fromModData}} -->
          <span v-if="item.type=='select'" class="inb">
            <!-- 字典  typeGroupCode -->
            <!-- {{fromModData}} -->
            <el-select :disabled="item.examineDisabled" v-model="fromModData[item.EN]" placeholder="请选择" size="mini" clearable v-if="item.typeGroupCode" @change="changeFromModData">
              <!-- {{fromModData[item.EN]}} -->
              <el-option v-for="i in optionsZi[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
            </el-select>
            <!-- 字典 dictTable-->
            <el-select :disabled="item.examineDisabled" v-model="fromModData[item.EN]" placeholder="请选择" size="mini" clearable v-else-if="item.dictTable">
              <el-option v-for="i in searchOptionTable[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
            </el-select>
            <!-- 小区管理页面   superior -->
            <el-cascader v-else-if="item.EN == 'superior'" v-model="fromModData[item.EN]" :options="superiorListOption" :props="{ checkStrictly: true }" size="mini" clearable></el-cascader>
            <!-- 租户管理员管理页面---租户 -->
            <el-select :disabled="item.examineDisabled" v-model="fromModData[item.EN]" placeholder="请选择" size="mini" clearable v-else-if="item.EN == 'sysCompanyCode'" @change="sysCompanyCodeChange(fromModData[item.EN])">
              <!-- {{fromModData[item.EN]}} -->
              <el-option v-for="i in getFindByTypeData" :key="i.value" :label="i.name" :value="i.sysCompanyCode"></el-option>
            </el-select>
            <!-- 租户管理员管理页面---角色 -->
            <el-select :disabled="item.examineDisabled" v-model="fromModData[item.EN]" placeholder="请选择" size="mini" clearable v-else-if="item.EN == 'groupId'" @change="sysRoleChange">
              <!-- {{fromModData[item.EN]}} -->
              <el-option v-for="i in roleArr" :key="i.id" :label="i.name" :value="i.id"></el-option>
            </el-select>
            <el-select v-else v-model="fromModData[item.EN]" placeholder="请选择" size="mini" clearable>
              <el-option v-for="i in item.option" :key="i.value" :label="i.label" :value="i.value"></el-option>
            </el-select>
          </span>
          <!-- user -->
          <span v-if="item.type=='user'">
            <!-- {{useruData}} -->
            <el-select :disabled="item.examineDisabled" v-model="fromModData[item.EN]" placeholder="请选择" size="mini">
              <el-option v-for="i in useruData" :key="i.value" :label="i.name" :value="i.id"></el-option>
            </el-select>
          </span>
          <!-- 单选 -->
          <span v-if="item.type=='radio'">
            <!-- {{item.radio}} -->
            <div style="margin-top: 20px">
              <el-radio-group v-model="fromModData[item.EN]" size="small">
                <el-radio-button v-for="i in item.radio" :label="i.code" :key="i.code">{{i.name}}</el-radio-button>
              </el-radio-group>
            </div>
          </span>
          <!-- 计数器 -->
          <span v-if="item.type=='number'">
            <span style="margin-top: 20px">
              <el-input-number v-model="fromModData[item.EN]" :min="1" label="描述文字" size="mini"></el-input-number>
            </span>
          </span>
          <!-- 站点下拉框 -->
          <span class="inb" v-if="item.type=='monitorPointId'&&item.addSign">
            <!-- <el-select placeholder="请选择" size="mini" clearable @change="monitorPointChange">
              <el-option></el-option>
            </el-select> -->
            <el-select :disabled="item.examineDisabled" v-model="fromModData[item.EN]" placeholder="请选择" size="mini" clearable @change="monitorPointChange">
              <el-option v-for="i in searchOptionTable[item.EN]" :key="i.value" :label="i.label" :value="i.value"></el-option>
            </el-select>
          </span>
          <!-- 工艺下拉框 -->
          <span class="inb" v-if="item.type=='workmanshipId'&&item.addSign">
            <!-- <el-select placeholder="请选择" size="mini" clearable @change="workmanshipChange">
              <el-option></el-option>
            </el-select> -->
            <el-select :disabled="item.examineDisabled" v-model="fromModData[item.EN]" placeholder="请选择" size="mini" clearable @change="workmanshipChange">
              <el-option v-for="i in workmanshipList" :key="i.id" :label="i.name" :value="i.id"></el-option>
            </el-select>
          </span>
          <!-- 设备下拉框 -->
          <span class="inb" v-if="item.type=='deviceId'&&item.addSign">
            <!-- <el-select placeholder="请选择" size="mini" clearable @change="deviceChange">
              <el-option></el-option>
            </el-select> -->
            <el-select :disabled="item.examineDisabled" v-model="fromModData[item.EN]" placeholder="请选择" size="mini" clearable @change="deviceChange">
              <el-option v-for="i in deviceList" :key="i.id" :label="i.deviceName" :value="i.id"></el-option>
            </el-select>
          </span>
          <!-- 表格 -->
          <span v-if="item.type=='table'">
            <div style="margin: 20px 0 0 30px;width:311px;">
              <el-table ref="table" :data="tableData" height="200" @selection-change="tableSelected">
                <el-table-column align="center" type="selection" :show-overflow-tooltip="true" width="60"></el-table-column>
                <el-table-column prop="name" label="参数名称" width="250">
                </el-table-column>
              </el-table>
            </div>
          </span>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="modifyData(true,modData)" size="mini">确定</el-button>
          <el-button @click="modifyData(false,modData)" size="mini">取消</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import {
  selectNameByuserId,
  getSelectByCodeAndType //用于添加租户管理员时选择租户后之间传回选择租户的角色：
} from "@/api/TenantAdministratorManagement";
import {
  assflParam, //增加
} from "@/api/schedule/base/flParam/index";
import {
  searchFlScheduleWorkmanship,
} from '@/api/schedule/base/flwaterMonitorPoint/index' //查询工艺
import {
  seaFlDevice
} from '@/api/schedule/base/flDevice/index'
// import dictionaries from '@/views/components/FLPage/dictionaries'
export default {
  name: "modificationi",
  props: [
    "modData",
    "attributeOrder",
    "optionsZi",
    "searchOptionTable",
    "TD",
    "UserArr",
    "useruData",
    "getFindByTypeData",
    "superiorListOption"
  ],
  data () {
    return {
      monitorPointId: "",
      workmanshipId: "",
      workmanshipList: [],
      deviceList: [],
      tableData: [],
      keyNumb: 0,
      DialogVisibleMods: false,
      //深克隆
      attributeOrderClone: undefined,
      //表单里面的值
      fromModData: undefined,
      // 组件类型
      modelType: "search",
      // 请求到的option
      searchOption: [],
      // 跨表请求option
      searchOptions: [],
      //编辑里面单选
      XTD: undefined,
      //查用户
      // useruData:[],
      // 备注
      textarea: "",
      // 改变的数据
      sysCompanyCodeRoles: "",
      // 租户信息
      // getFindByTypeData:[],
      // 返回的角色对象
      roleArr: [],
      // 返回的角色对象-默认值
      roleArrObj: "",
      //返回的参数id集合
      paramId: []
    };
  },

  watch: {
    optionsZi (newVal) {
      // console.log(newVal);
      this.searchOption = newVal;
    },
    searchOptionTable (newVal) {
      // console.log(newVal);
      this.searchOptions = newVal;
    },
    modData (newData) {
      // console.log(newData,'888666');
      debugger;
      this.getUpdataWatch();
    },
    attributeOrder: {
      deep: true,
      handler (newValue, oldValue) {
        this.attributeOrderClone = JSON.parse(JSON.stringify(newValue))
      }
    },
    DialogVisibleMods (value) {
      if (value == true) {
        this.$nextTick(() => {
          this.paramId.forEach(row => {
            this.$refs.table[0].toggleRowSelection(this.tableData.find(item => {
              return row === item.id
            }), true)
          })
        })
      }
    },
  },
  computed: {
    TableDataModel () {
      let new_DataModel = JSON.parse(JSON.stringify(this.attributeOrder));
      for (let i = 0; i < new_DataModel.length; i++) {
        if (!new_DataModel[i].modificationSign) {
          console.log("-------------计算属性-----------");
          new_DataModel.splice(i, 1);
        }
      }
      // console.log(new_DataModel);
      return new_DataModel;
    }
  },
  mounted () {
    [this.attributeOrderClone, this.fromModData, this.XTD]
      = JSON.parse(JSON.stringify(
        [this.attributeOrder, this.modData, this.TD])
      );
    // console.log(this.modData)
    // debugger;
    this.handleDeviceName(this.modData.monitorPointId)
    this.handleParam(this.modData.deviceId)
    let param = this.fromModData.param.split(",");
    this.paramId = param.map(item => {
      return +item;
    });
  },
  methods: {
    //选中配置参数
    tableSelected (val) {
      let arr = []
      for (let selectedItem of val) {
        arr.push(selectedItem.id)
      }
      this.fromModData.param = arr.toString()
    },
    //获取设备名称
    handleDeviceName (v) {
      let obj = {
        monitorPointId: v
      }
      seaFlDevice(obj).then(response => {
        this.deviceList = response.data
        this.fromModData.deviceId = response.data[0].deviceName
        console.log(this.fromModData.deviceId)
        // debugger;
      }).catch();
    },
    //获取监测点
    monitorPointChange (v) {
      this.monitorPointId = v
      let obj = {
        monitorPointId: this.monitorPointId
      }
      searchFlScheduleWorkmanship(obj).then(response => {
        this.workmanshipList = response.data
        console.log(this.workmanshipList)
      }).catch();
      seaFlDevice(obj).then(response => {
        this.deviceList = response.data
        console.log(this.deviceList)
      }).catch();
    },
    //选择工艺
    workmanshipChange (v) {
      this.workmanshipId = v;
      let obj = {
        monitorPointId: this.monitorPointId,
        workmanshipId: this.workmanshipId
      }
      seaFlDevice(obj).then(response => {
        this.deviceList = response.data
      }).catch();
    },
    //选择设备
    deviceChange (v) {
      this.handleParam(v)
    },
    handleParam (id) {
      let obj = { deviceId: id }
      assflParam(obj).then(response => {
        this.tableData = response.data
      }).catch();
    },
    changeFromModData () { },
    // 字典值的类型转换
    changeDictionariesType (fromModData) {
      // console.log(fromModData,'改变之前');  
      for (const key in fromModData) {
        if (fromModData.hasOwnProperty(key)) {
          const element = fromModData[key];
          let elements
          if (element) {
            elements = String(element)
          }
          fromModData[key] = elements
        }
      }
    },
    modificationiClick () {
      console.log(this.fromModData, 'shishenme');
      this.DialogVisibleMods = true;
      this.getSelectNameByuserIds();
    },
    async getSelectNameByuserIds () {
      console.log(this.modData, "999");
      const sysCompanyCode = this.modData.sysCompanyCode;
      const id = this.modData.id;

      if (this.modData.sysCompanyCode) {
        const res = await selectNameByuserId(id);
        console.log(res, 999922222);
        const objRole = res.data;
        if (objRole) {
          this.modData.groupId = objRole.id;
          this.roleArr = [objRole];
        }
      }
    },
    // 角色
    sysRoleChange (newvalue) {
      // this.$emit('sysRoleChangeData',newvalue)
      const roleArrs = this.roleArr;
      var id = "";
      for (let index = 0; index < roleArrs.length; index++) {
        const element = roleArrs[index];
        id = roleArrs[index].id;
      }
      this.$emit("sysRoleIdq", id);
      console.log(id, "????");
    },
    // 租户改变函数
    async sysCompanyCodeChange (value) {
      const res = await getSelectByCodeAndType(value);
      console.log(
        res,
        "子组件用于添加租户管理员时选择租户后之间传回选择租户的角色"
      );
      const roleObjs = res.data;
      // console.log(roleObjs,96968888);

      if (roleObjs) {
        this.roleArr = roleObjs;
        // console.log([roleObjs],999999999);

        console.log(this.roleArr, 8888888888888);
      } else {
        console.log("该租户没有对应的角色");
      }
    },
    // 更新数据
    getUpdataWatch () {
      [this.attributeOrderClone, this.fromModData, this.XTD] = JSON.parse(
        JSON.stringify([this.attributeOrder, this.modData, this.TD])
      );
      // this.changeDictionariesType(this.fromModData)
    },
    handleCloses (done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          this.modifyData(false, this.modData);
          done();
        })
        .catch(_ => { });
    },
    //转化时间格式
    getSTime (val) {
      this.modData.createTime = val;
    },
    //确定修改-取消修改
    modifyData (value, modData) {
      let bur = true;
      if (value === false) {
        this.$emit("modifyData", false, this.fromModData);
        this.DialogVisibleMods = false;
        console.log(this.fromModData, 'zheshishenem');
      } else {
        console.log(this.attributeOrderClone, 'shenme?')
        for (let i = 0; i < this.attributeOrderClone.length; i++) {
          // console.log(this.attributeOrderClone[i].value,'前');
          this.attributeOrderClone[i].value = this.fromModData[this.attributeOrderClone[i].EN]

          // console.log(this.attributeOrderClone[i].value,'后');
          let at = this.attributeOrderClone[i];
          // -----------------------------
          // if (at.modificationSign) {
          //   if (at.result === false || at.value == '') { 
          //     console.log(at);                
          //     console.log(bur,888);                   
          //     // 判断红色星号    是否必须为空
          //     if (at["skipSign"]) {
          //       bur = true;
          //     }
          //     else{
          //       bur = false
          //       break;
          //     }
          //   }
          //   else{
          //   }       
          // }       
          // =----------------------------

          if (at.modificationSign && !at["skipSign"]) {
            console.log(at, 777777777);

            if (at.result === false || at.value === "" || at.value === undefined) {
              console.log(at, 66666666666);
              // 判断红色星号    是否必须为空
              console.log(at.value, 22);
              // numberqq +=1
              bur = false
              break
            }
          } else {
            if (at.result === false) {
              bur = false
              break
            }
          }
          // if (this.attributeOrderClone[i].value == "") {
          //   console.log("测试");
          //   console.log(this.attributeOrderClone[i]);
          // }
        }
        console.log(bur, 9999);

        if (bur === true && value === true) {
          if (typeof (this.fromModData.deviceId) != "number") {
            console.log(this.deviceList)
            this.deviceList.map(item => {
              if (this.fromModData.deviceId == item.deviceName) {
                this.fromModData.deviceId = item.id
              }
            })
          }
          this.$emit("modifyData", value, this.fromModData);
          this.DialogVisibleMods = false;
          // this.$message({
          //   message: "修改成功",
          //   type: "success"
          // });
        } else if (bur === false && value === true) {
          this.$message({
            message: "请输入合法内容！",
            type: "warning"
          });
        }
      }
    },

    //正则表达式
    BurExp (e, item, index) {
      // if (this.attributeOrderClone[index].attributeOrderClone) {
      if (this.attributeOrderClone[index].skipSign && e.target.value === '') {
        item.result = true;
      } else {
        let boolean = new RegExp(item.Exp).test(e.target.value);
        item.result = boolean;
      }
    }
  },
  created () {
    // this.getSelectNameByuserIds()
  }
};
</script>
<style scoped src="src/styles/allCss.css"></style>
<style lang="scss" scoped>
.sll {
  /deep/.is-circle {
    padding: 14px !important;
  }
  .diaologs {
    .el-dialog__wrapper {
      /deep/.dialog {
        width: 760px;
        // padding-right: 20px;
      }
    }
  }

  // /deep/.el-dialog{
  //   .el-dialog__header{
  //   width: 780px;
  //   }
  //   .el-dialog__body{
  //   width: 780px;
  //   }
  // }
  /deep/.el-dialog__body {
    display: flex;
    flex-wrap: wrap;
  }
  .list {
    // height: 44px;
    // width: 370px;
    // width: 320px;
    // margin-left: 20px;
    // height: 44px;
    // width: 300px;
    // .inb{
    //   height: 44px;
    //   width: 370px;
    // }
    // margin: 0;
    // padding: 0;
    .fon {
      text-align: right;
      margin-right: 14px;
      width: 99px;
      .inb {
        height: 44px;
        width: 370px;
        .el-input {
          /deep/.el-input__inner {
            width: 210px;
            height: 30px;
          }
        }
        .el-select {
          /deep/.el-input__inner {
            width: 210px;
            height: 30px;
          }
        }
        .el-textarea {
          /deep/.el-textarea__inner {
            width: 210px;
            height: 60px;
          }
        }
      }
    }
    .is-circle {
      margin-left: 3px;
      padding: 0 !important;
      color: #e69620;
      border: 0;
      /deep/.el-icon-warning {
        height: 14px;
        width: 14px;
      }
    }
  }
}
</style>


